<template>
  <div class="panel-group">
    <div class="card-panel-0">
      <div class="card-panel-text">
        当日访问量
      </div>
      <count-to :start-val="totalNumPre" :end-val="totalNum" :duration="3200" class="card-panel-num"/>
    </div>
    <div class="card-panel-1">
      <div class="card-panel-text">
        成功笔数
      </div>
      <count-to :start-val="succNumPre" :end-val="succNum" :duration="3200" class="card-panel-num"/>
    </div>

    <div class="card-panel-2">
      <div class="card-panel-text">
        失败笔数
      </div>
      <count-to :start-val="failNumPre" :end-val="failNum" :duration="3200" class="card-panel-num"/>
    </div>
  </div>
</template>

<script>
import CountTo from "../../components/vue-count-to/vue-countTo"

export default {
  components: {
    CountTo
  },
  data() {
    return {
      totalNumPre: 0,
      succNumPre: 0,
      failNumPre: 0,
      totalNum: 0,
      succNum: 0,
      failNum: 0,
      chartTimer: null
    }
  },
  created() {
    this.getData()
  },
  methods: {
    getData() {
      // this.chartTimer = setInterval(() => {
      //   getApiInvorkNum().then(response => {
      //     this.totalNumPre = this.totalNum
      //     this.succNumPre = this.succNum
      //     this.failNumPre = this.failNum
      //     this.totalNum = response.apiInvorkNum
      //     this.succNum = response.apiInvorkSucc
      //     this.failNum = response.apiInvorkFail
      //   });
      // }, 5 * 1000)
      this.totalNumPre = this.totalNum
      this.succNumPre = this.succNum
      this.failNumPre = this.failNum
      this.totalNum = 100
      this.succNum = 100
      this.failNum = 100
    },
  }
}
</script>

<style lang="scss" scoped>
@import '../../assets/scss/index';

.panel-group {
  .card-panel-0 {
    position: absolute;
    top: 10%;
    left: 10%;
    height: 80%;
    width: 40%;
    background: #a8a6a6;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
    border-color: rgba(0, 0, 0, .05);
    border-radius: 8px;

    .card-panel-text {
      position: relative;
      top: 20px;
      font-size: 36px;
      font-weight: bold;
    }

    .card-panel-num {
      position: relative;
      top: 30px;
      /*position: absolute;*/
      /*top: 40%;*/
      /*left: 20px;*/
      font-size: 54px;
      font-weight: bold;
    }
  }

  .card-panel-1 {
    position: absolute;
    top: 10%;
    left: 51%;
    height: 38.5%;
    width: 40%;
    background: #58c11f;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
    border-color: rgba(0, 0, 0, .05);
    border-radius: 8px;

    .card-panel-text {
      /*position: absolute;*/
      /*top: 20px;*/
      /*left: 20px;*/
      font-size: 36px;
      font-weight: bold;
    }

    .card-panel-num {
      /*position: absolute;*/
      /*top: 20px;*/
      /*left: 80%;*/
      font-size: 46px;
      font-weight: bold;
    }
  }

  .card-panel-2 {
    position: absolute;
    top: 50.5%;
    left: 51%;
    height: 38.5%;
    width: 40%;
    background: #ef6306;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
    border-color: rgba(0, 0, 0, 0.05);
    border-radius: 8px;

    .card-panel-text {
      /*position: absolute;*/
      /*top: 20px;*/
      /*left: 5%;*/
      font-size: 36px;
      font-weight: bold;
    }

    .card-panel-num {
      /*position: absolute;*/
      /*top: 20px;*/
      /*left: 80%;*/
      font-size: 46px;
      font-weight: bold;
    }
  }
}
</style>
